<template>
  <div class="person">
    <h2>一辆{{ brand }}车，价值{{ price }}元</h2>
    <button @click="changePrice">更改汽车价格</button>
    <button @click="changePrice2">更改汽车价格2</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script lang="ts" setup>
import { reactive, toRefs, toRef } from 'vue'
let car = reactive({
  brand: '斯蒂庞克',
  price: 123456,
})

let { brand, price } = toRefs(car)
let jg = toRef(car, 'price')

function changePrice() {
  // 更改 price 同时, 也会更改 car 中value
  price.value += 10
  console.log(price, car.price)
}
function changePrice2() {
  jg.value += 10
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
button {
  margin: 0 5px;
}
</style>
